<template>
	<view>
		<myNavbar :navigationBarStyle="navigationBarStyle" @getHeight="getHeight" :leftIcon="leftIcon" :showBack="false" style="background-color: #fff;"></myNavbar>
		<view class="commodity">
			<view :style="{ height: navHeght - 12 + 'rpx' }" class="xialashuaxin">
				<!-- <view class="afe">
					<view>{{shuaxin[iii]}}</view>
					<view class="gengxinshijian">
						上次更新 {{shuaTime?shuaTime:'上辈子'}}
					</view>
				</view>
				<image v-show="iii===2" class="loading" src="../../../static/homeImg/icon/loading.gif" mode=""></image> -->
			</view>
			<scroll-view
				v-if="scrollhide"
				class="scroll_view"
				scroll-y="true"
				refresher-enabled="true"
				:refresher-triggered="triggered"
				:refresher-threshold="100"
				refresher-background="#eee"
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@refresherabort="onAbort"
				@scrolltolower="scrolltolower"
				@scroll="scrolll"
			>
				<!-- <view class="padding" style="padding-top:20rpx ;width: 100%;"></view> -->
				<view class="option" v-for="(item, index) in dataList" :key="index">
					<view class="option-title">
						<view class="title-left">
							<view class="option-awater"><image :src="item.avatar" mode=""></image></view>
							<view>{{ item.nickname }}</view>
						</view>
						<view class="title-right" @click="collection(index, item.article_id)"><image src="../../../static/threedoit.png" mode="widthFix"></image></view>
						<view class="isCollection" v-if="isCollection == index" @click="CollectionFun(index, item.article_id)">
							{{ item.is_collection == 0 ? '收藏' : '取消收藏' }}
						</view>
					</view>
					<view class="option-img" @click="$linkTo('./article_detail?article_id=' + item.article_id)"><image :src="item.cover" mode=""></image></view>
					<view class="option-detail">
						<view class="detail-title">{{ item.title }}</view>
						<view class="detail-data">
							<view class="look">
								<view class="look-icons">
									<uni-icons class="look-icon" type="eye-filled" color="#777777" size="16"></uni-icons>
									{{ item.browse }}
								</view>
								<view class="look-icons">
									<uni-icons class="look-icon" type="hand-thumbsup-filled" color="#777777" size="16"></uni-icons>
									{{ item.likes }}
								</view>
							</view>
							<view class="hours">{{ $timeago(item.date_public * 1000) }}</view>
						</view>
					</view>
				</view>
				<!-- 底部状态 -->
				<view class="bottom-status flex_r_center"><image style="width: 280rpx;height: 30rpx;" src="../../../static/homeImg/icon/feimao.png" mode=""></image></view>
			</scroll-view>
			<view v-else class="scroll_view">
				<!-- <view class="padding" style="padding-top:20rpx ;width: 100%;"></view> -->
				<view class="option" v-for="(item, index) in dataList" :key="index">
					<view class="option-title">
						<view class="title-left">
							<view class="option-awater"><image :src="item.avatar" mode=""></image></view>
							<view>{{ item.nickname }}</view>
						</view>
						<view class="title-right" @click="collection(index, item.article_id)"><image src="../../../static/threedoit.png" mode="widthFix"></image></view>
						<view class="isCollection" v-if="isCollection == index" @click="CollectionFun(index, item.article_id)">
							{{ item.is_collection == 0 ? '收藏' : '取消收藏' }}
						</view>
					</view>
					<view class="option-img" @click="$linkTo('./article_detail?article_id=' + item.article_id)"><image :src="item.cover" mode=""></image></view>
					<view class="option-detail">
						<view class="detail-title">{{ item.title }}</view>
						<view class="detail-data">
							<view class="look">
								<view class="look-icons">
									<uni-icons class="look-icon" type="eye-filled" color="#777777" size="16"></uni-icons>
									{{ item.browse }}
								</view>
								<view class="look-icons">
									<uni-icons class="look-icon" type="hand-thumbsup-filled" color="#777777" size="16"></uni-icons>
									{{ item.likes }}
								</view>
							</view>
							<view class="hours">{{ $timeago(item.date_public * 1000) }}</view>
						</view>
					</view>
				</view>
				<!-- 底部状态 -->
				<view class="bottom-status flex_r_center"><image style="width: 280rpx;height: 30rpx;" src="../../../static/homeImg/icon/feimao.png" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
import myNavbar from '@/myComponents/myNavbar.vue';
import md5 from '@/common/api/md5.js';
export default {
	name: 'home',
	data() {
		return {
			shuaTime: '',
			iii: 0,
			shuaxin: ['下拉可以刷新', '带你吃遍全国', '正在刷新...', '刷新完成'],
			navHeght: '',
			page: 1,
			isCollection: NaN,
			dataList: [],
			scrollhide:true,
			navigationBarStyle: {
				background: '#fff',
				fontColor: '#000000',
				iconColor: '#000000',
				fontWeight: 0,
				iconText: '抢手货'
			},
			leftIcon: {
				isShow: true,
				url1: '../../search/index',
				url2: '../../../pagesB/myarticle/myarticle'
			},
			scrollY: '',
			scrollDic: '',
			scrollBottom: '',

			triggered: false
		};
	},
	watch: {
		// scrollY() {
		// 	//通知他妈的滚动了。
		// 	this.setPageScroll(this.scrollY);
		// },
		// // scrollBottom() {
		// // 	if(this.scrollBottom != 0) {
		// // 		//通知他妈的触底了
		// // 		this.setReachBottom();
		// // 	}
		// // }
	},
	onLoad: function(options) {
		this._freshing = false;
		setTimeout(() => {
			this.getArticles();
			this.triggered = true;
		}, 1000);
	},
	onPullDownRefresh() {
		setTimeout(() => {
			// this.$request('/app/community/getArticles', 'post', {
			// 	page: this.page
			// }).then(res => {
			// 	this.dataList = res.content
			// })
			// uni.stopPullDownRefresh();
			// 这里放刷新数据的方法
		}, 1000);
	},
	onShow() {},
	onReady() {
		this.getHeight;
	},
	onReachBottom() {
		this.page++;
		this.getArticles();
	},
	onPageScroll(e) {
		// console.log(e.scrollTop, 11); //距离页面顶部距离
		if(e.scrollTop>10){
			this.scrollhide=false
		}else{
			this.scrollhide=true
		}
	},
	methods: {
		// socrllTop(e) {
		// 	this.iii = 0
		// 	//此处的scrollDic是监听下拉开始到下拉结束手指移动的距离
		// 	this.scrollDic = this.scrollY;
		// },
		// socrllTop1(e) {
		// 	// console.log(e)
		// 	if (e.currentTarget.offsetTop >= 55) {
		// 		this.iii = 1
		// 	} else {
		// 		this.iii = 0
		// 	}
		// },
		// socrllTop2(e) {
		// 	if (e.currentTarget.offsetTop >= 55) {
		// 		this.iii = 2
		// 		setTimeout(() => {
		// 			this.$request('/app/community/getArticles', 'post', {
		// 				page: this.page
		// 			}).then(res => {
		// 				this.dataList = res.content
		// 				this.iii = 3
		// 				uni.stopPullDownRefresh();
		// 				uni.setStorageSync('shuaTime', Math.round(new Date().getTime()))
		// 				this.shuaTime = this.$dateFormat(uni.getStorageSync('shuaTime'), 'm-d H:i')
		// 			})
		// 		}, 1000)
		// 	}
		// },
		scrolll(e) {
			// console.log(e.detail.scrollTop)
		},
		onPulling(e) {
			// console.log("onpulling", e);
		},
		onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			if (!this.triggered) {
				this.triggered = true;
			}
			setTimeout(() => {
				this.dataList = [];
				this.getArticles();
				this.triggered = false;
				this._freshing = false;
			}, 1000);
		},
		onRestore() {
			this.triggered = 'restore'; // 需要重置
			console.log('onRestore');
			this.triggered = false;
			this._freshing = false;
		},
		onAbort() {
			this.triggered = 'restore';
			console.log('onAbort');
			this.triggered = false;
			this._freshing = false;
		},
		scrolltolower() {
			this.page++;
			this.getArticles();
		},
		getArticles() {
			this.$request('/app/community/getArticles', 'post', {
				page: this.page
			}).then(res => {
				this.dataList = this.dataList.concat(res.content);
			});
		},
		getHeight(e) {
			this.navHeght = e.navigationHeight + e.ktxStatusHeight;
			console.log('e', e);
		},
		collection(index, id) {
			if (this.isCollection === NaN || this.isCollection != index) {
				this.isCollection = index;
			} else {
				this.isCollection = NaN;
			}
		},
		CollectionFun(index, id) {
			if (this.dataList[index].is_collection) {
				this.dataList[index].is_collection = 0;
				this.$set(this.dataList, index, this.dataList[index]);
			} else {
				this.dataList[index].is_collection = 1;
				this.$set(this.dataList, index, this.dataList[index]);
			}
			this.collection(index, id);
			this.$request('/app/article/collection', 'post', {
				access_token: uni.getStorageSync('access_token').replace(/^\"|\"$/g, ''),
				article_id: id
			}).then(res => {
				uni.showToast({
					title: res.message,
					duration: 2000,
					icon: 'none'
				});
			});
		}
	},
	components: {
		myNavbar
	}
};
</script>

<style lang="scss" scoped>
@import url('@/static/css/flex.css');

page {
	height: 100%;
	background: #f3f4f5;
}

.scroll_view {
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	background-color: #eee;
}

.gengxinshijian {
	font-size: 24rpx;
	color: #7c8096;
}

.xialashuaxin {
	text-align: center;
	position: relative;
	// background-color: #fff;
	margin-bottom: 24rpx;
	background-color: #eee;
	.afe {
		height: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.loading {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 70%;
		transform: translateY(-50%);
		left: 150rpx;
	}
}

.commodity {
	// padding: 0 20rpx;
	background-color: #f3f4f5;

	.option {
		background: #ffffff;
		width: 100%;
		padding-bottom: 10rpx;
		margin: 0 auto 20rpx;

		border-radius: 10px;
		overflow: hidden;

		.option-title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.title-left {
				color: #777777;
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.option-awater {
					width: 48rpx;
					height: 48rpx;
					border-radius: 99px;
					margin-right: 16rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.title-right {
				width: 24rpx;
				height: 24rpx;

				image {
					width: 100%;
				}
			}

			.isCollection {
				position: absolute;
				top: 80rpx;
				right: 20rpx;
				height: auto;
				width: auto;
				padding: 20rpx;
				background: #ffffff;
				box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 6rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				// line-height: 80rpx;
			}
		}

		.option-img {
			width: 100%;
			height: 420rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.option-detail {
			padding: 20rpx;

			.detail-title {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 28rpx;
			}

			.detail-data {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777777;
				font-size: 20rpx;

				.look {
					display: flex;
					align-items: center;

					.look-icons {
						display: flex;
						align-items: center;
						margin-right: 20rpx;

						.look-icon {
							margin-right: 8rpx;
						}
					}
				}
			}
		}
	}

	.bottom-status {
		margin: 20rpx 0;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		padding: 10rpx 0;
		background-color: #f3f4f5;
	}
}
</style>
